<template>
  <div class="mine">
    <div class="m_head">
        <router-link to="/user">
          <div class="m_user">
            <div class="m_photo">
              <img v-if="pageInfo.userinfo.photos" :src="pageInfo.userinfo.photos" alt="">
              <img src="../assets/header.png" alt="">
            </div>
            <div class="m_name">
                <p>{{pageInfo.userinfo.name}}</p>
                <span>{{getPhone}}</span>
            </div>
        </div> 
        </router-link>
        <div class="m_more">
          <router-link to="/msg">
            <div class="dot" v-if="pageInfo.userinfo.messageCount>0"></div>
            <i class="iconfont icon-xiaoxi1"></i>
          </router-link>
        </div>
    </div>
    <div class="my_bee"> 
      <div class="mybee_list" @click="handClick('/income')">
        <div style="color:#F07530;">理财收益</div>
        <ul>
            <li v-for="(item,index) in getMoneyList" :key="index">
              <span>{{item.name}}</span>
              <span>{{item.profitValue | getNum}}</span>
            </li>
          </ul>
      </div>
      <div class="mybee_list"  @click="handClick('/InvitCome')">
       <div style="color:#DFAB1C;">推荐收益</div>
        <ul>
            <li v-for="(item,index) in getMoneyList" :key="index">
               <span>{{item.name}}</span>
              <span>{{item.inviteProfitValue | getNum}}</span>
            </li>
          </ul>
      </div>
    </div>
    <div class="my_btn">
      <div class="mine_btn">
        <router-link to="/recharge" class="charge_money"><div><i class="iconfont icon-qianbao"></i></div>充币</router-link>
        <router-link to="/tment" class="mention_money"><div><i class="iconfont icon-qianbao2"></i></div>提币</router-link>
      </div>
      <!-- <router-link to="/help">常见问题帮助</router-link> -->
    </div>
    <div class="my_setting">
      <div>
        <mt-cell title="已购产品"
        to="/bought"
        is-link>
        <span>{{pageInfo.userinfo.productCount}}</span>
        <i slot="icon" class="iconfont icon-chanpin1" style="color:#004097;"></i>
      </mt-cell>
      </div>
     <div>
        <mt-cell title="身份认证"
        :to="'/certification?status='+pageInfo.userinfo.status"
        is-link>
        <span>{{pageInfo.userinfo.status==1?"未认证":pageInfo.userinfo.status==2?"已认证":pageInfo.userinfo.status==3?"审核中":""}}</span>
        <i slot="icon" class="iconfont icon-shenfenrenzheng" style="color:#fbb03b;"></i>
      </mt-cell>
     </div>
      <div>
        <mt-cell title="转账记录"
        to="/bill"
        is-link>
        <!-- <span>2</span> -->
        <i slot="icon" class="iconfont icon-zhuanzhangjilu" style="color:#f74d34;"></i>
      </mt-cell>
      </div>
     <div>
        <mt-cell title="关联地址"
        to="/address"
        is-link>
        <!-- <span>2</span> -->
        <i slot="icon" class="iconfont icon-changyongdizhiiconkaobei" style="color:#24ac71;"></i>
      </mt-cell>
     </div>
      <div>
        <mt-cell title="设置"
        :to="'/set?type='+pageInfo.userinfo.statusPay"
        is-link>
        <!-- <span>2</span> -->
        <i slot="icon" class="iconfont icon-shezhi" style="color:#919191;"></i>
      </mt-cell>
      </div>
    </div>
     <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="products">
        <router-link to="/"><i class="iconfont icon-chanpin1"></i>产品</router-link>
      </mt-tab-item>
      <mt-tab-item id="mine">
        <router-link to="/mine"><i class="iconfont icon-wode2"></i>我的</router-link>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<script>
import { Header } from "mint-ui";
import { userInfo } from "../api/api.js";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import util from '../assets/js/util'
export default {
  name: "Mine",
  data() {
    return {
      msg: "",
      selected: "mine",
      user: sessionStorage.getItem("user")
        ? JSON.parse(sessionStorage.getItem("user"))
        : {},
      list: {},
      getMoneyList:[]
    };
  },
  computed:{
    ...mapState([
      "pageInfo"
    ]),
     getPhone(){
       console.log(this.pageInfo)
      return util.getPhone(this.pageInfo.userinfo.mobilephone)
    }
  },
  filters:{
    getNum(val){
        return val ? val.toFixed(4) : '0.0000';
    }
  },
  methods: {
    getUser(ev) {
      let para = {
        id: this.user.id,
        token: JSON.parse(sessionStorage.getItem("token"))
      };
      userInfo(para)
        .then(res => {
          this.list = res.data;
          // console.log(this.list);
        })
        .catch(err => {
          Toast({
            message: "请求超时",
            position: "bottom",
            duration: 5000
          });
        });
    },
    handClick(path){
       this.$router.push({path:path});
    },
    initList(){
      let arr = [];
          for(var i in this.pageInfo.userinfo.coinData){
          arr.push({
            name:this.pageInfo.userinfo.coinData[i].coinType,
            lockValue:this.pageInfo.userinfo.coinData[i].lockValue,
            profitValue:this.pageInfo.userinfo.coinData[i].profitValue,
            inviteProfitValue:this.pageInfo.userinfo.coinData[i].inviteProfitValue
          })
      }
      this.getMoneyList = arr;
    }
  },
  mounted() {
    this.$store.dispatch('getUserInfo');
    this.initList();
    // this.getUser();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("../../static/css/mine.css");
</style>
